<template>
  <div class="catalog">
    <p class="heading">目录</p>
    <div
        v-for="(item) in catalogs"
        :key="item.id"
        class="topic-item text-sm truncate"
        :style="{textIndent: 20 * Number(item.level) + 'px'}"
        @click="clickCatalog(item.text)">
      {{ item.text }}
    </div>
  </div>
</template>

<script setup lang="ts">
import type {PropType} from 'vue'

defineProps({
  catalogs: {
    type: Array as PropType<HeadList[]>,
    default: () => [],
  },
})
//点击目录定位文章
const clickCatalog = (itemText: string) => {
  const dom: HTMLElement | null = document.getElementById(itemText)
  if (dom) {
    const top = dom.offsetTop
    const winHeight = window.innerHeight * 0.4 + 20
    document.documentElement.scrollTop = top + winHeight
  }
}

</script>

<style lang="less" scoped>
.catalog {
  width: 100%;
  .heading {
    font-weight: 600;
    text-indent: 1.5em;
  }

  .topic-item {
    padding: 6px 16px;
    cursor: pointer;
  }

  .topic-item:hover {
    color: #00c888;
  }
}
</style>
